<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js"></script>

</head>

<body>
    <div id="app">
    <input type="text" @keyup.enter="getinfo"><br>
    <input type="text" @keyup.13="getinfo"><br>
    delete:<input type="text" @keyup.delete="getinfo"><br>
    esc:<input type="text" @keyup.esc="getinfo"><br>
    space:<input type="text" @keyup.space="getinfo"><br>
    tab:<input type="text" @keydown.tab="getinfo"><br>
    </br>
    pagedown:<input type="text" @keyup.page-down="getinfo"><br>
    e:<input type="text" @keyup.e="getinfo"><br>
    huiche:<input type="text" @keyup.huiche="getinfo"><br>
  
    



    <!-- 
    tab键无法触发keyup事件 ,只能用keydown事件
     
    怎么获取某个键的按键修饰符
    第一步：通过event.key获取这个键的真实名字、
    第二步：将这个真实名字以key-case风格进行命名
            PageDown是真实名字，经过命名之后：page-down


    按键修饰符是可以自定义的：
    通过Vue的全局配置对象config来进行按键修饰的自定义，语法规则：
        Vue.config.keyCodes.按键修饰符的名字 = 键值


    
    -->
    </div>
    
</body>

    <script>

        Vue.config.keyCodes.huiche = 13

        var app = new Vue({
            el: '#app',
            data: {
               
            },
            methods: {
                getinfo(event){
                    // console.log("hello")
                    // if(event.keyCode === 13){
                    //    console.log(event.target.value);
                    // }
                    console.log(event.target.value);
                    
                }
            },
          
        })
    </script> 
</html>